<!DOCTYPE html>
<html>

<head>
    <title>vue-form 测试</title>
    <meta charset="utf-8"/>
    <!--   <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">-->
    <style>
        .error-list {
            color: red;
            margin-bottom: 1rem;
        }
    </style>
</head>

<body>
<div id="app">
    <vue-form :state="formstate" @submit.prevent="submit">

        <messages></messages>
        <validate tag="div">
            <label>姓名 *</label>
            <input v-model="d.name" name="name" required minlength="2"/>
            <field-messages tag="span"
                            name="name"
                            v-if="field('name')"
                            class="error-list">
                <span slot="required">必填</span>
                <span slot="minlength">最少2个字</span>
            </field-messages>
        </validate>

        <validate>
            <label>邮箱 *</label>
            <input type="email" v-model="d.email" name="email" required/>
            <field-messages tag="span"
                            v-if="field('email')"
                            class="error-list"
                            name="email">
                <span slot="required">必填</span>
                <span slot="email">格式错误</span>
            </field-messages>
        </validate>

        <button type="submit">Submit</button>

    </vue-form>

    <pre>{{formstate}}</pre>

</div>


<script src="/plugins/vue/vue.js"></script>
<script src="/plugins/vue/vue-llak0-9XZZZZZZform.js"></script>
<script>
    Vue.use(VueForm);

    Vue.prototype.field = function (name) {
        var hasError = false;
        if (this.formstate.$error != undefined) {
            //第一次访问时候 未定义
            eval("hasError=this.formstate.$error." + name);
        }
        return this.formstate.$submittedState && this.formstate.$submittedState.$invalid && hasError;
    };


    new Vue({
        el: '#app',
        data: {
            formstate: {},
            d: {
                name: '',
                email: ''
            }
        },
        methods: {
            submit: function () {
                console.log(this.formstate.$valid);
            }
        }
    });
</script>

</body>

</html>
